<template>
  <div id="addclaims">
    <h1 id="h1">提交理赔凭证新增理赔</h1>
    <div id="addclaims-bootom">
   <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">

  <el-form-item label="事故发生时间" required>
  <el-date-picker
      v-model="ruleForm.time"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
  </el-form-item>
    <el-form-item label="事故发生地点" prop="address">
    <el-input  v-model="ruleForm.address"></el-input>
  </el-form-item>
 
  <el-form-item label="选择相关订单" prop="belongToOrders">
      <el-select v-model="ruleForm.belongToOrders" placeholder="请选择客户">
      <el-option :label="item.customersId.name" :value="item._id" v-for="item in ordersAllData " :key="item._id "></el-option>
    </el-select>
      <el-select v-model="ruleForm.belongToOrders" placeholder="请选择订单种类">
      <el-option :label="item.productsId.name" :value="item._id" v-for="item in ordersAllData " :key="item._id "></el-option>
    </el-select>
    <el-button type="primary" plain @click="detailed(ruleForm.belongToOrders)">详细信息</el-button>
  </el-form-item>
  <el-form-item label="上传凭证" prop="reason">
    <el-upload
  action="http://localhost:3000/images/uploadImages"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove"
  :on-success="handleSuccess">
  <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
  </el-form-item>
  <el-form-item label="申请理由" prop="reason">
    <el-input type="textarea" v-model="ruleForm.reason"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
    </div>
    <!-- 订单详细形象 -->
    <el-dialog
  title="提示"
  :visible.sync="centerDialogVisible"
  width="30%"
  center>
  
 <el-tabs type="border-card">
  <el-tab-pane>
    <span slot="label"><i class="el-icon-date"></i> 顾客信息</span>
    <table>
      <tr>
        <td>顾客姓名： {{tableData.name}}</td>
      </tr>
      <tr>
        <td>顾客年龄： {{tableData.age}}</td>
      </tr>
      <tr>
        <td>顾客性别： {{tableData.gender}}</td>
      </tr>
      <tr>
        <td>顾客联系电话： {{tableData.phone}}</td>
      </tr>
      <tr>
        <td>顾客身份证号码： {{tableData.IDCard}}</td>
      </tr>
     
      </table> 
   
    


  </el-tab-pane>
  <el-tab-pane label="订单信息">
    <table>
      <tr>
        <td>保险名字： {{productsIdDate.name}}</td>
      </tr>
      <tr>
        <td>承包时间（/月）： {{productsIdDate.time}}</td>
      </tr>
      <tr>
        <td>保险价格： {{productsIdDate.money}}</td>
      </tr>
      <tr>
        <td>保险描述： {{productsIdDate.describe}}</td>
      </tr>
      </table> 
   
  </el-tab-pane>
</el-tabs>

  <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import { createNamespacedHelpers} from 'vuex'
const {mapActions}=createNamespacedHelpers('claims')
const {mapActions:ordermapActions,mapState:ordermapState}=createNamespacedHelpers('adminsOrders')
  export default {
   async created(){
       const a=localStorage.getItem("_id");//获取销售员的_id
        this.belongToSales=a;
       await this.getOrdersList()//获取所有订单
         console.log( 999,this.ordersAllData);
    },
   mounted(){
     //console.log( 999,this.ordersAllData);
   },
    data() {
      return {
        ruleForm: {
          time: '',//事故发生时间
          address: '',//事故发生地址
         // region: '',//选择客户订单
          reason: '',//申请理由
          voucher:[],//理赔图集
          belongToSales:'',//绑定的销售员_id
          belongToOrders:''//绑定订单——id
        },
        rules: {
          address: [
            { required: true, message: '请输入事故地址', trigger: 'blur' },
           
          ],
         belongToOrders: [
            { required: true, message: '请选择客户名称', trigger: 'change' }
          ],
          reason: [
            { required: true, message: '请填写事故原因', trigger: 'blur' }
          ]
        },
          centerDialogVisible: false,
        
        //上传图片
        dialogImageUrl: '',
        dialogVisible: false,
        tableData:{
          name:'',
          age:'',
          gender:'',
          IDCard:'',
          phone:'',
        },
        productsIdDate:{
          name:'',
          time:'',
          money:'',
          describe:'',
          belongToClassifys:''
        }
      };
    },
    computed:{
      ...ordermapState(['ordersAllData'])
    },
    methods: {
      ...mapActions(['addClaims']),
      ...ordermapActions(['getOrdersList','getOrdersOne']),
      //增加理赔申请
     submitForm(formName) {
         this.$refs[formName]. validate((valid) => {
          if (valid) {
             this.$message({
                 message: '恭喜你，新增成功',
                type: 'success'
         });
            this.add()
          
          } else {
            //console.log('error submit!!');
            return false;
          }
        });
      },
     async add(){
        this.ruleForm.belongToSales=localStorage.getItem("_id");
        const data=await this.addClaims(this.ruleForm)
        console.log(251,data);
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      //上传图片
       handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        console.log(77,file);
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
         handleSuccess(response) {
             console.log(99,response.data[0]);
              this.ruleForm.voucher.push({imgUrl:response.data[0]});
              console.log(this.ruleForm.voucher);
                // this.claimsData.images.push({
                //     imgUrl: response.data[0],
                // });
            
        },
      //详细信息
     async  detailed(val){
         this.centerDialogVisible = true
        //  console.log(22,val);
       const data=await  this.getOrdersOne({_id:val})
       console.log(258,data);
      this.tableData=data.data[0].customersId
      this.productsIdDate=data.data[0].productsId
       console.log(259, data.data[0].customersId);
       }
    }
  }
</script>

<style scopde lang='scss'>
#addclaims {
  margin: 0;
  padding: 0;
  #h1 {
    border-bottom: 1px solid white;
    margin: 0;
    padding: 0;
    line-height: 50px;
    text-align: left;
  }
  #addclaims-bootom {
    width: 50%;
    margin: 0 auto;
    padding: 60px 0;
  }
}
</style>